import React from 'react';
import 'antd/dist/reset.css';
import { Form, Input, Button, Modal, Card, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { login } from '../API/authAPI';

const LoginPage = () => {
  const [form] = Form.useForm();

  const handleSubmit = async (values) => {
    console.log('开始登录流程', values);
    try {
      const result = await login(values.username, values.password);
      console.log('登录成功', result);
      if (result.access_token) {
        message.success('登录成功');
        window.location.href = '/dashboard';
      }
    } catch (error) {
      console.error('登录错误详情:', error);
      message.error(error.message || '请检查用户名和密码是否正确');
    }
  };

  return (
    <Card
      title="成绩分析系统 - 登录"
      variant
      hoverable
      style={{ maxWidth: 300, margin: '100px auto', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)' }}
    >
      <Form
        form={form}
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={handleSubmit}
      >
        <Form.Item
          name="username"
          rules={[{
            required: true,
            message: '请输入用户名!'
          }]}
        >
          <Input prefix={<UserOutlined />} placeholder="用户名" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{
            required: true,
            message: '请输入密码!'
          }]}
        >
          <Input prefix={<LockOutlined />} type="password" placeholder="密码" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            登录
          </Button>
        </Form.Item>
        <Button href='/register' style={{ width: '100%' }}>
          注册
        </Button>
      </Form>
    </Card>
  );
};

export default LoginPage;